<script lang="ts" setup>
/**
 * 注册页面组件
 *
 * 功能：
 * 1. 提供用户注册表单
 * 2. 实现表单验证
 * 3. 处理注册请求
 * 4. 显示操作结果提示
 *
 * 使用的主要技术：
 * - Vue 3 组合式 API (Composition API)
 * - TypeScript
 * - Element Plus UI 库
 * - Vben Admin 框架组件
 */

// 导入类型定义
import type { VbenFormSchema } from '@vben/common-ui';  // Vben表单模式类型
import type { Recordable } from '@vben/types';         // 通用记录类型

// 导入 Vue 核心功能和路由
import { computed, h, ref, nextTick } from 'vue';                // Vue 3 组合式API核心函数
import { useRouter } from 'vue-router';                // Vue Router 路由钩子
import { ElMessage } from 'element-plus';              // Element Plus 消息组件

// 导入项目组件和工具
import { AuthenticationRegister, z } from '@vben/common-ui';  // Vben注册组件和表单验证
import { $t } from '@vben/locales';                          // 国际化工具
import { registerApi } from '#/api/core/auth';         // 注册API

// 定义组件名称
defineOptions({ name: 'Register' });

// 初始化路由和状态
const router = useRouter();                // 路由实例，用于页面跳转
const loading = ref(false);                // 加载状态，用于控制按钮禁用

/**
 * 表单配置
 * 使用 computed 计算属性，当依赖项变化时会自动重新计算
 * 返回一个包含表单字段配置的数组
 */
const formSchema = computed((): VbenFormSchema[] => {
  return [
    // 用户名输入框配置
    {
      component: 'VbenInput',              // 使用 Vben 输入框组件
      componentProps: {

        placeholder: $t('authentication.usernameTip'),  // 占位符文本
        autocomplete: 'new-password', // 添加 autocomplete 属性

      },
      fieldName: 'username',               // 字段名
      label: $t('authentication.username'), // 标签文本
      rules: z.string().min(1, { message: $t('authentication.usernameTip') }), // 验证规则：必填
    },
    // 密码输入框配置
    {
      component: 'VbenInputPassword',      // 使用 Vben 密码输入框组件
      componentProps: {
        passwordStrength: true,            // 启用密码强度指示器
        placeholder: $t('authentication.password'),
        autocomplete: 'new-password', // 添加 autocomplete 属性
      },
      fieldName: 'password',
      label: $t('authentication.password'),
      renderComponentContent() {           // 自定义渲染密码强度文本
        return {
          strengthText: () => $t('authentication.passwordStrength'),
        };
      },
      rules: z.string().min(1, { message: $t('authentication.passwordTip') }), // 验证规则：必填
    },
    // 确认密码输入框配置
    {
      component: 'VbenInputPassword',
      componentProps: {
        placeholder: $t('authentication.confirmPassword'),
        passwordStrength: true,
        autocomplete: 'new-password', // 添加 autocomplete 属性
      },
      dependencies: {                      // 字段依赖配置
        rules(values) {                    // 动态验证规则，依赖 password 字段
          const { password } = values;
          return z
            .string({ required_error: $t('authentication.passwordTip') })
            .min(1, { message: $t('authentication.passwordTip') })
            .refine((value) => value === password, {  // 自定义验证：必须与密码相同
              message: $t('authentication.confirmPasswordTip'),
            });
        },
        triggerFields: ['password'],       // 触发重新验证的依赖字段
      },
      fieldName: 'confirmPassword',
      label: $t('authentication.confirmPassword'),
    },
    // 同意政策复选框配置
    {
      component: 'VbenCheckbox',
      fieldName: 'agreePolicy',
      renderComponentContent: () => ({     // 自定义渲染复选框文本和链接
        default: () =>
          h('span', [                      // 使用 h 函数创建虚拟 DOM
            $t('authentication.agree'),
            h(
              'a',
              {
                class: 'vben-link ml-1 ',   // 样式类
                href: '',
              },
              `${$t('authentication.privacyPolicy')} & ${$t('authentication.terms')}`,
            ),
          ]),
      }),
      rules: z.boolean().refine((value) => !!value, {  // 验证规则：必须勾选
        message: $t('authentication.agreeTip'),
      }),
    },
  ];
});

/**
 * 表单提交处理函数
 * @param values - 表单数据对象
 */
async function handleSubmit(values: Recordable<any>) {
  try {
    loading.value = true;                  // 设置加载状态

    const { username, password, confirmPassword } = values;
    const res = await registerApi({
      username,
      password,
      confirmPassword
    });

    if (res.status === 200) {
      ElMessage.success($t('sys.login.registerSuccess'));

      // 修改：使用 nextTick 和 async/await 确保状态更新
      await nextTick();
      // 修改：使用完整的路由对象
      await router.push({
        name: 'Login',  // 使用命名路由
        replace: true   // 替换当前历史记录
      });
    } else {
      // 修复类型错误
      ElMessage.error($t('sys.login.registerFailed'));
    }
  } catch (error: any) {
    ElMessage.error(error?.response?.data?.message || $t('sys.login.registerFailed'));
  } finally {
    loading.value = false;                 // 重置加载状态
  }
}
</script>

<template>
  <!--
    使用 Vben Admin 的注册组件
    :form-schema - 传入表单配置
    :loading - 传入加载状态
    @submit - 绑定表单提交事件处理函数
  -->
  <AuthenticationRegister
    :key="'register-form'"
    :form-schema="formSchema"
    :loading="loading"
    @submit="handleSubmit"
  />
</template>
